<template>
  <div class="gameList">
    <!-- 搜索 -->
    <div class="section">
      <h3>游戏列表</h3>
      <search-item @searchList="searchData" @showaddgameDialog="showaddgameDialog"></search-item>
    </div>
    <!-- 表格 -->
    <el-table
      :height="tabHeight"
      border
      style="width: 99%"
      align="center"
      :data="tableData"
      v-loading="loading"
    >
      <el-table-column prop="id" label="游戏ID" width="80"></el-table-column>
      <el-table-column prop="classify" label="游戏版本" width="75"></el-table-column>
      <el-table-column label="游戏名" width="162">
        <template slot-scope="scope">
          <img
            :src="scope.row.icon"
            alt
            v-if="scope.row.icon!=''"
            style="width: 44px;height: 44px;margin:0 auto;display:block;"
          />
          <span class="gamename">{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="对接参数" width="70">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="showParams(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="母包地址" :render-header="packicon">
        <template slot-scope="scope">
          <span v-if="scope.row.packageurl===''" style="color:#f74c6b">无</span>
          <div v-else>
            <span>{{scope.row.packageurl}}</span>
            <el-button
              type="text"
              size="small"
              :data-clipboard-text="scope.row.packageurl"
              @click="copyPackageurl"
              class="copypackurl"
            >复制</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="cpurl" label="充值回调地址" :render-header="cpurlicon">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.cpurl===''"
            type="text"
            style="font-size:13px"
            @click="addRecharge(scope.row)"
          >添加回调地址</el-button>
          <span v-else>{{scope.row.cpurl}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="video_status" label="宣传视频" width="70">
        <template slot-scope="scope">
          <span v-if="scope.row.video_status===1" style="color:#FFBA30">待审核</span>
          <span v-if="scope.row.video_status===2" style="color:#08BE8C">
            已过审
            <el-button type="text" style="font-size:13px" @click="showvideo(scope.row)">查看</el-button>
          </span>
          <span
            v-if="scope.row.video_status===3"
            style="color:#FB4665;display: flex;justify-content:center"
          >
            <span>未过审</span>
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.video_audit_reason"
              placement="top-start"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-button
            type="text"
            v-if="scope.row.video_status===0||scope.row.video_status===3"
            style="font-size:13px;padding:0;"
            @click="showaddvideoDialog(scope.row)"
          >上传</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="run_time" label="首发时间" width="120"></el-table-column>
      <el-table-column prop="audit_status" label="审核状态" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.audit_status===1" style="color:#7b7f83">待提交</span>
          <span v-else-if="scope.row.audit_status===2" style="color:#ad720e">审核中</span>
          <span v-else-if="scope.row.audit_status===3" style="color:#1c7231">已过审</span>
          <span
            v-else-if="scope.row.audit_status===4"
            style="color:#be1a1d;display: flex;justify-content:center"
          >
            <span>未过审</span>
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.game_audit_reason"
              placement="top-start"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="游戏资料" width="60">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.audit_status===2||scope.row.audit_status===3"
            type="text"
            size="small"
            style="color:#D7DAE2"
          >编辑</el-button>
          <el-button v-else type="text" size="small" @click="showeditDialog(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="游戏状态" width="70">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status==1" type="text" size="mini" style="color:#7b7f83">未上线</el-button>
          <el-button v-if="scope.row.status==3" type="text" size="mini" style="color:#be1a1d">已下线</el-button>
          <el-button
            v-if="scope.row.status==2"
            type="text"
            size="mini"
            style="color:#1c7231"
            @click="submitAudit(scope.$index,scope.row)"
          >已上线</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom">
      <!-- 将分页器作为子组件引入 -->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="pagenationData.currentPage"
        :page-size="pagenationData.pageSize"
        :total="pagenationData.pageTotal"
        background
        layout="prev, pager, next"
        prev-text="上一页"
        next-text="下一页"
      ></el-pagination>
    </div>
    <!-- 添加游戏 -->
    <AddGameDialog
      v-if="addgamedialog.show"
      :isShow="addgamedialog.show"
      :dialogRow="addgamedialog.dialogRow"
      @closeDialog="hideaddgameDialog"
    ></AddGameDialog>
    <!-- 查看对接参数 -->
    <ShowParamsDialog
      v-if="showParamsdialog.show"
      :isShow="showParamsdialog.show"
      :dialogRow="showParamsdialog.dialogRow"
      @closeDialog="hideParamsDialog"
    ></ShowParamsDialog>
    <!-- 编辑游戏 -->
    <EditGameDialog
      v-if="showEditdialog.show"
      :isShow="showEditdialog.show"
      :dialogRow="showEditdialog.dialogRow"
      :editList="showEditdialog.editList"
      @closeDialog="hideEditDialog"
    ></EditGameDialog>
    <!-- 添加视频 -->
    <AddVideoDialog
      v-if="addvideodialog.show"
      :isShow="addvideodialog.show"
      :dialogRow="addvideodialog.dialogRow"
      @closeDialog="hideaddvideodialog"
    ></AddVideoDialog>
    <!-- 查看视频 -->
    <ShowVideo
      v-if="showVideo.show"
      :isShow="showVideo.show"
      :dialogRow="showVideo.dialogRow"
      @closeDialog="hideshowVideo"
    ></ShowVideo>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import SearchItem from "./component/searchItem";
import AddGameDialog from "./component/addGameDialog";
import AddVideoDialog from "./component/addVideoDialog";
import ShowParamsDialog from "./component/showPramasDialog";
import EditGameDialog from "./component/editGameDialog";
import ShowVideo from "./component/showVideo";

import {
  getGameList,
  getSearchList,
  getEditgameList,
  submitAudit,
  addRecharge,
  showgameParam
} from "@/api/gameManage";

import Clipboard from "clipboard";
export default {
  inject: ["reload"],
  data() {
    return {
      tabHeight: window.innerHeight - 200,
      tableData: [],
      search: {},
      loading: true,
      pagenationData: {
        pageTotal: 0,
        currentPage: 1,
        pageSize: 20
      },
      addgamedialog: {
        show: false,
        dialogRow: []
      },
      addvideodialog: {
        show: false,
        dialogRow: {}
      },
      showParamsdialog: {
        show: false,
        dialogRow: {}
      },
      showEditdialog: {
        show: false,
        dialogRow: {},
        editList: {}
      },
      showVideo: {
        show: false,
        dialogRow: ""
      },
      pageData: {
        page: 1,
        limit: 20
      }
    };
  },
  components: {
    SearchItem,
    AddGameDialog,
    ShowParamsDialog,
    EditGameDialog,
    AddVideoDialog,
    ShowVideo
  },
  mounted() {
    this.getGameList();
  },
  methods: {
    searchData(search) {
      this.search = search;
      this.search.page = 1;
      this.pagenationData.currentPage = 1;
      this.searchList();
    },
    // 搜索数据
    searchList() {
      this.loading = true;
      const para = Object.assign({}, this.search);
      getGameList(para)
        .then(res => {
          this.loading = false;
          this.pagenationData.pageTotal = res.data.count;
          this.tableData = res.data.list;
        })
        .catch(error => {});
    },
    // 获取数据列表
    getGameList() {
      const para = Object.assign({}, this.pageData);
      getGameList(para)
        .then(res => {
          this.loading = false;
          this.pagenationData.pageTotal = res.data.count;
          this.tableData = res.data.list;
        })
        .catch(error => {});
    },
    // 查看对接参数
    showParams(row) {
      const para = Object.assign({}, { app_id: row.id });
      showgameParam(para)
        .then(res => {
          this.showParamsdialog.dialogRow = res.data;
          this.showParamsdialog.show = true;
        })
        .catch(error => {});
    },
    // 关闭对接参数
    hideParamsDialog() {
      this.showParamsdialog.show = false;
    },
    // 上下分页
    handleCurrentChange(val) {
      this.pageData.page = val;
      this.search.page = val;
      this.searchList();
    },
    // 显示添加游戏弹框
    showaddgameDialog() {
      this.addgamedialog.show = true;
    },
    // 关闭添加游戏
    hideaddgameDialog() {
      this.addgamedialog.show = false;
    },
    // 显示编辑游戏
    showeditDialog(row) {
      const para = Object.assign({}, { gameId: row.id });
      getEditgameList(para)
        .then(res => {
          this.showEditdialog.dialogRow = row;
          this.showEditdialog.editList = res.data;
          this.showEditdialog.show = true;
        })
        .catch(error => {});
    },
    // 关闭编辑游戏
    hideEditDialog() {
      this.showEditdialog.show = false;
    },
    hideshowVideo() {
      this.showVideo.show = false;
    },
    // 关闭添加宣传视频
    hideaddvideodialog() {
      this.addvideodialog.show = false;
    },
    // 显示添加宣传视频
    showaddvideoDialog(row) {
      this.addvideodialog.dialogRow = row;
      this.addvideodialog.show = true;
    },
    // 添加回调地址
    addRecharge(row) {
      this.$prompt("", "添加回调地址", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /\S/,
        inputErrorMessage: "回调地址不能为空"
      })
        .then(({ value }) => {
          const para = Object.assign(
            {},
            {
              gameId: row.id,
              cpUrl: value
            }
          );
          addRecharge(para)
            .then(res => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "添加成功"
                });
                setTimeout(() => {
                  this.reload();
                }, 20);
              }
            })
            .catch(error => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入回调地址"
          });
        });
    },
    // 查看视频
    showvideo(row) {
      this.showVideo.dialogRow = row;
      this.showVideo.show = true;
    },
    // 复制母包地址
    copyPackageurl() {
      var clipboard = new Clipboard(".copypackurl");
      clipboard.on("success", e => {
        this.$message.success("复制成功");
        clipboard.destroy();
      });
      clipboard.on("error", e => {
        // 不支持复制
        this.$message.error("该浏览器不支持自动复制");
        clipboard.destroy();
      });
    },
    // 母包地址提示
    packicon(h, { column }) {
      const inReview =
        "考虑母包审核问题，暂时只支持线下早游戏运营人员对接，测试完毕后运营人员会上传母包，此处即可查看母包下载地址";
      return h("div", [
        h("span", column.label),
        h(
          "el-tooltip",
          {
            props: {
              placement: "top"
            }
          },
          [
            h(
              "div",
              {
                slot: "content",
                style: {
                  width: "250px",
                  whiteSpace: "normal",
                  "margin-bottom": "10px"
                }
              },
              inReview
            ),

            h("i", {
              class: "el-icon-question",
              style: "color:red;margin-left:5px;"
            })
          ]
        )
      ]);
    },
    // 充值回调地址提示
    cpurlicon(h, { column }) {
      const inReview =
        "为确保线上运营稳定性，回调地址请务必填写正确，一经设置不可更改，特殊情况需要更改，需联系官方运营人员操作";
      return h("div", [
        h("span", column.label),
        h(
          "el-tooltip",
          {
            props: {
              placement: "top"
            }
          },
          [
            h(
              "div",
              {
                slot: "content",
                style: {
                  width: "250px",
                  whiteSpace: "normal",
                  "margin-bottom": "10px"
                }
              },
              inReview
            ),

            h("i", {
              class: "el-icon-question",
              style: "color:red;margin-left:5px;"
            })
          ]
        )
      ]);
    }
  }
};
</script>
<style lang="scss">
.gameList {
  .gamename {
    width: 150px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.el-message-box__content {
  font-size: 13px;
}
.el-table th div {
  line-height: 23px;
}
.el-message-box__title,
.el-message-box__btns {
  text-align: center;
}
.el-message-box .el-button--small {
  padding: 9px 30px;
}
.el-message-box {
  padding: 20px 0;
}
.el-message-box__content {
  padding: 25px;
}
.el-table__row {
  .el-table_1_column_2 {
    text-align: left;
  }
}
</style>